@use '../../../styles/mixins';
@use '../variables';

$block: '.#{variables.$ns}hotkey';

#{$block} {
    display: inline-block;
    padding: 1px 5px;
    border-radius: var(--g-border-radius-xs);

    &,
    kbd {
        @include mixins.text-body-1();
    }

    &_view {
        &_light {
            color: var(--g-color-text-primary);
            background-color: var(--g-color-base-generic);

            #{$block}__plus {
                color: var(--g-color-text-hint);
            }
        }

        &_dark {
            color: var(--g-color-text-light-complementary);
            background-color: var(--g-color-base-light-simple-hover);

            #{$block}__plus {
                color: var(--g-color-text-light-hint);
            }
        }
    }
}
